<template>
  <div>
    <div>
      <h4>ADL能力评定</h4>
      <el-row>
        <el-col>
          <div>
            <el-button type="primary" @click="pgForm.adl_dialogVisible = true">填写《Barthel指数评定量表》</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <span>进食 </span>
            <el-input v-model="pgForm.adljs"  style="width: 50%;"></el-input>
            <span> 分 </span>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <span>洗澡 </span>
            <el-input v-model="pgForm.adlxz"  style="width: 50%;"></el-input>
            <span> 分 </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div>
            <span>总分 </span>
            <el-input class="readonly" v-model="pgForm.adlinput1" placeholder="" readonly style="width: 70%;"></el-input>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <el-input v-model="pgForm.adlinput2" readonly></el-input>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="Barthel指数评估量表"
      :visible.sync="pgForm.adl_dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div class="one">
        <div class="eat">
          1、进食
        </div>
        <div class="list1">
          <el-radio-group v-model.number="pgForm.adlradio1" class="el-radio-group">
            <el-radio :label="10" class="el-radio1">10分 自己在合理的时间内(约10秒钟吃一口)可用筷子取食眼前的食物。若需辅具时，应会自行穿脱。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 需部分帮助(切面包、抹黄油、夹菜、盛饭等)。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 依赖。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="two">
        <div class="transfer">
          2、转移
        </div>
        <div class="list2">
          <el-radio-group v-model.number="pgForm.adlradio2" class="el-radio-group">
            <el-radio :label="15" class="el-radio1">15分 自理。</el-radio>
            <br>
            <el-radio :label="10" class="el-radio1">10分 需要少量帮助(1人)或语言指导。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 需两人或1个强壮、动作娴熟的人帮助。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 完全依赖别人。</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="three">
        <div class="decoration">
          3、修饰
        </div>
        <div class="list3">
          <el-radio-group v-model.number="pgForm.adlradio3" class="el-radio-group">
            <el-radio :label="5" class="el-radio1">5分 可独立完成洗脸、洗手、刷牙及梳头。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 需要别人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="four">
        <div class="wc">
          4、上厕所
        </div>
        <div class="list4">
          <el-radio-group v-model.number="pgForm.adlradio4" class="el-radio-group">
            <el-radio :label="10" class="el-radio1">10分 可自行进出厕所，并能穿好衣服。使用便盆者，可自行清理便盆。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 需帮忙保持姿勢的平衡，整理衣物或使用卫生紙。使用便盆者，可自行取放便盆，但须仰赖他人清理。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 需他人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="five">
        <div class="take-shower">
          5、洗澡
        </div>
        <div class="list5">
          <el-radio-group v-model.number="pgForm.adlradio5" class="el-radio-group">
            <el-radio :label="5" class="el-radio1">5分 可独立完成（不论是盆浴或淋浴）。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 需別人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="six">
        <div class="walk">
          6、行走（平地45m）
        </div>
        <div class="list6">
          <el-radio-group v-model.number="pgForm.adlradio6" class="el-radio-group">
            <el-radio :label="15" class="el-radio1">15分 使用或不使用辅具皆可独立行走50公尺以上。</el-radio>
            <br>
            <el-radio :label="10" class="el-radio1">10分 需要稍微的扶持或口头指导方可行走50公尺以上。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 虽无法行走，但可独立操纵轮椅（包括转弯、进门、及接近桌子、床沿）并可推行轮椅50公尺以上。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 需別人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="seven">
        <div class="stairs">
          7、上下楼梯
        </div>
        <div class="list7">
          <el-radio-group v-model.number="pgForm.adlradio7" class="el-radio-group">
            <el-radio :label="10" class="el-radio1">10分 可自行上下楼梯（允许抓扶手、用拐杖）。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 需要稍微帮忙或口头指导。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 无法上下楼梯。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="eight">
        <div class="clothes">
          8、穿脱衣服
        </div>
        <div class="list8">
          <el-radio-group v-model.number="pgForm.adlradio8" class="el-radio-group">
            <el-radio :label="10" class="el-radio1">10分 可自行穿脫衣服、鞋子及辅具。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 在別人帮忙下、可自行完成一半以上的动作。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 需別人帮忙。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="nine">
        <div class="shit">
          9、大便控制
        </div>
        <div class="list9">
          <el-radio-group v-model.number="pgForm.adlradio9" class="el-radio-group">
            <el-radio :label="10" class="el-radio1">10分 能控制。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 偶尔失禁（每周＜1次）。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 失禁或昏迷。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="ten">
        <div class="urine">
          10、小便控制
        </div>
        <div class="list10">
          <el-radio-group v-model.number="pgForm.adlradio10" class="el-radio-group">
            <el-radio :label="10" class="el-radio1">10分 能控制。</el-radio>
            <br>
            <el-radio :label="5" class="el-radio1">5分 偶尔失禁（每周＜1次）或尿急（无法等待便盆或无法即时赶到厕所）或需別人帮忙处理。</el-radio>
            <br>
            <el-radio :label="0" class="el-radio1">0分 失禁、昏迷或需要他人导尿。</el-radio>
            <br>
          </el-radio-group>
        </div>
      </div>
      <div class="sum">
        <span>总分</span>
        <span>{{ adlsum }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "adl_assess",
  title: "ADL评定",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props:{
    fromdata:{},
    istrans:false,
  },
  data() {
    return {
      pgForm:{
        adl_dialogVisible: false,
        adlradio1: '',
        adlradio2: '',
        adlradio3: '',
        adlradio4: '',
        adlradio5: '',
        adlradio6: '',
        adlradio7: '',
        adlradio8: '',
        adlradio9: '',
        adlradio10: '',
        adlinput1: 0,
        adlinput2: '评定结果：完全残疾，日常生活完全依赖。',
        adljs:'',
        adlxz:''
      },

    }
  },
  computed:{
    adlsum:{
      get(){
        return (this.pgForm.adlradio1)*1+(this.pgForm.adlradio2)*1+(this.pgForm.adlradio3)*1+(this.pgForm.adlradio4)*1+(this.pgForm.adlradio5)*1+(this.pgForm.adlradio6)*1+(this.pgForm.adlradio7)*1+(this.pgForm.adlradio8)*1+(this.pgForm.adlradio9)*1+(this.pgForm.adlradio10)*1
      },
      set(val){

      }
    }
  },
  watch: {
    sum(val){
      this.pgForm.barthel_input1 = val
    },
    "pgForm.adlinput1"(val) {
      if (pgForm.adlinput1 >= 0 & pgForm.adlinput1 <= 20) {
        this.pgForm.barthel_input2 = '评定结果：完全残疾，日常生活完全依赖。'
      }
      else if (pgForm.adlinput1 >= 21 & pgForm.adlinput1 <= 40) {
        this.pgForm.barthel_input2 = '评定结果：重度残疾，日常生活明显依赖。'
      }
      else if (pgForm.adlinput1 >= 41 & pgForm.adlinput1 <= 60) {
        this.pgForm.barthel_input2 = '评定结果：中度残疾，日常生活需要帮助。'
      }
      else if (pgForm.adlinput1 > 60 & pgForm.adlinput1 < 100) {
        this.pgForm.barthel_input2 = '评定结果：良，生活基本自理。'
      }
      else {
        this.pgForm.barthel_input2 = '评定结果：无障碍。'
      }
    }
  },
  methods: {
    closeDialog() {
      this.pgForm.adlinput1 = this.adlsum
      this.pgForm.adlradio1 = ''
      this.pgForm.adlradio2 = ''
      this.pgForm.adlradio3 = ''
      this.pgForm.adlradio4 = ''
      this.pgForm.adlradio5 = ''
      this.pgForm.adlradio6 = ''
      this.pgForm.adlradio7 = ''
      this.pgForm.adlradio8 = ''
      this.pgForm.adlradio9 = ''
      this.pgForm.adlradio10 = ''
      this.adlsum = ''
      this.pgForm.adl_dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.pgForm.adlinput1 = this.adlsum
          this.pgForm.adlradio1 = ''
          this.pgForm.adlradio2 = ''
          this.pgForm.adlradio3 = ''
          this.pgForm.adlradio4 = ''
          this.pgForm.adlradio5 = ''
          this.pgForm.adlradio6 = ''
          this.pgForm.adlradio7 = ''
          this.pgForm.adlradio8 = ''
          this.pgForm.adlradio9 = ''
          this.pgForm.adlradio10 = ''
          this.adlsum = ''
          done();
        })
        .catch(_ => {
        });
    }
  }
}
</script>

<style scoped>
div,h4,span,ul {
  /*margin: 0;*/
  /*padding: 0;*/
  list-style: none;
  box-sizing: border-box;
}

.el-row{
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  flex-direction: row;
}
.el-col {
  margin:10px 0;
}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten {
  margin-top: 25px;
}

.one .eat, .two .transfer, .three .decoration, .four .wc, .five .take-shower, .six .walk, .seven .stairs, .eight .clothes, .nine .shit, .ten .urine {
  border-radius: 5px;
  padding: 10px 15px;
  background-color: #f7f7fb;
}

.el-radio1, .el-radio2, .el-radio3, .el-radio4 {
  margin-top: 20px;
}
.el-radio1{
  margin-left: 5px;
}
.sum {
  height: 50px;
  line-height: 50px;
  margin-top: 25px;
  background-color: #f7f7fb;
}

.sum span:first-child {
  margin-left: 20px;
}

.sum span:last-child {
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
  margin-left: 40px;
  background-color: #008b90;
}

</style>
